<template>
	<n-spin :show="loading">
		<n-space :wrap-item="false" justify="space-between" class="w-900px h-600px" style="flex-wrap: nowrap;">
			<div class="h-full codePreviewTree"  v-if="previewDatas">
				<n-tree ref="treeRef" block-line block-node  expand-on-click :data="pathTrees" />
			</div>
			<div class="h-full" style="width:700px;overflow: auto;" v-if="previewDatas">
				<n-tabs type="line" animated v-model:value="activeTabIndex"  class="mb-2" v-bind:on-update:value="handleUpdateTabVal">
					<n-tab v-for="item,index in previewDatas" v-bind:key="item.id" :name="index" :tab="item.name" display-directive="show"/>
				</n-tabs>
				<div class="relative">
					<n-button quaternary size="small" @click="()=>handleCopy(previewDatas![activeTabIndex].code,false)" style="position: absolute;top: 0; right: 0;z-index: 999;color: white;">
						<template #icon>
							<svg-icon icon="material-symbols:file-copy-outline"></svg-icon>
						</template>
					</n-button>
					<codemirror v-model:modelValue="previewDatas[activeTabIndex].code" disabled :style="{ height:'500px' }" :autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensions" />
				</div>

			</div>
		</n-space>
	</n-spin>
</template>

<script  setup lang='ts' >
import { onMounted, ref } from 'vue';
import { fetchPrviewCode } from "@/service/api/genCode/index"
import { GenCodePreviewDto } from './codePreview';
import { TreeInst, TreeOption } from 'naive-ui'
import { Codemirror } from 'vue-codemirror'
import { oneDark } from '@codemirror/theme-one-dark'
import { getLanguageSupport } from '@/views/template-manage/group/languageOptions';
import { handleCopy } from "@/utils/common/business";

type Props = {
	id: Common.IdType
}
const props = defineProps<Props>()

const loading = ref<boolean>(false)
const previewDatas = ref<GenCodePreviewDto[]>()

const treeRef = ref<TreeInst|null>(null)
const pathTrees = ref<TreeOption[]>()
const activeTabIndex=ref<number>(0)
const extensions = ref([getLanguageSupport("Java")(),oneDark])
async function init(){
	loading.value = true

	const {data,error} = await fetchPrviewCode(props.id)
	if(!error){
		if(data == null || data.length == 0){
			window.$message?.error("未找到预览数据")
		}else{
			previewDatas.value = data!
			initTree(data!)
		}
	}
	loading.value = false
}
function initTree(data:GenCodePreviewDto[]){
	const result:TreeOption[] = []
	for(let i = 0 ; i<data.length ; i++){
		const previewDto = data[i]
		const paths = previewDto.path.split("/")
		let curTreeNode:TreeOption = {};
		for(let j = 1; j<paths.length ; j++){
			const curPath = paths[j]
			if(curPath.trim() == "")continue;
			if(j == 1){
				curTreeNode = getOrAddInTree(curPath,result)
			}else{
				curTreeNode = getOrAddInTree(curPath,curTreeNode.children!)
			}
		}
		curTreeNode.children = [genTree(previewDto.name,true)]

	}
	pathTrees.value = result
}
function getOrAddInTree(nodeKey:string,tree:TreeOption[]):TreeOption{
	if(!tree || tree.length == 0){
		console.info(tree)
		const result = genTree(nodeKey)
		tree.push(result)
		return result
	}
	for(let i = 0 ; i<tree.length ; i++){
		const cur = tree[i]
		if(cur.key == nodeKey){
			return cur
		}
	}
	const result = genTree(nodeKey)
	tree.push(result)
	return result
}
function genTree(nodeKey:string,isLeaf:boolean = false):TreeOption{
	return {label:nodeKey,key:nodeKey,children:[],isLeaf:isLeaf}
}
function handleUpdateTabVal(val:number){
	activeTabIndex.value = val
	extensions.value = [getLanguageSupport(previewDatas.value![val].language)(),oneDark]
}

onMounted(()=>{
	init()
})
</script>

<style>
.codePreviewTree .n-tree .n-tree-node-indent{
	width: 5px;
}
</style>
